<script setup lang="ts">
import Panel from './panel.vue'
import useNotificationStore from '@/store/modules/notification'

defineOptions({
  name: 'Notification',
})

const notificationStore = useNotificationStore()

notificationStore.init()
</script>

<template>
  <HDropdown class="flex-center cursor-pointer px-2 py-1">
    <HBadge :value="notificationStore.total > 9 ? true : notificationStore.total">
      <SvgIcon name="i-ri:notification-3-line" />
    </HBadge>
    <template #dropdown>
      <Panel />
    </template>
  </HDropdown>
</template>
